<template>
    <div>
        <el-button type="primary" style="margin-left: 16px" @click="RoomCodeAdd()">新增商品标签</el-button>
        <el-input v-model="roomcodes.goodsTypeName" style="max-width: 300px" placeholder="商品标签"
            class="input-with-select">
            <template #append>
                <el-button @click="RoomCodeGetlist()" :icon="Search" />
            </template>
        </el-input>
    </div>
    <el-table ref="selectedRows" :data="tableData" style="width: 100%; margin-top: 30px;">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="goodsTypeName" label="商品标签" width="150" />
        <el-table-column label="操作" width="250">
            <template #default="{ row }">
                <el-button type="text" @click="RoomCodeUpdate(row)">编辑</el-button>
                <el-button type="text" @click="RoomCodeDelete(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <div>
        <el-dialog v-model="roomCodeDialog" title="添加商品标签" width="500">
            <el-form :model="form">

                <el-form-item label="商品标签" :label-width="formLabelWidth">
                    <el-input v-model="form.goodsTypeName" style="width: 200px;" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="roomCodeDialog = false">关闭</el-button>
                    <el-button type="primary" @click="RoomCodeInsert()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="roomCodeUpdateDialog" title="编辑商品标签" width="500">
            <el-form :model="form1">
                <el-form-item label="商品标签" :label-width="formLabelWidth">
                    <el-input v-model="form1.goodsTypeName" style="width: 200px;" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="roomCodeDialog = false">关闭</el-button>
                    <el-button type="primary" @click="RoomCodeUpd()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>



    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import type { ElTable, UploadInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const dialogTableVisible = ref(false)
const formLabelWidth = '140px'
const tableData = ref([]);

const roomcodes = reactive({
    goodsTypeName: ''
})
//钩子函数
onMounted(() => {
    RoomCodeGetlist();
})
const RoomCodeGetlist = () => {
    axios.get('http://120.26.135.179:8033/api/GoodsProductShow', {
        params: {
            goodsTypeName: roomcodes.goodsTypeName
        }
    })
        .then((res) => {
            tableData.value = res.data.data;
        })
}

const roomCodeDialog = ref(false);
//新增房号
const form = reactive({
    goodsTypeName: ''
})
const RoomCodeAdd = () => {
    roomCodeDialog.value = true;
}

const RoomCodeInsert = () => {
    axios.post('http://120.26.135.179:8033/api/GoodsProductAdd', form)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success(res.data.message)
                roomCodeDialog.value = false;
                RoomCodeGetlist();
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}

//编辑房号
const roomCodeUpdateDialog = ref(false);
const RoomCodeUpdate = (row: any) => {
    roomCodeUpdateDialog.value = true;
    form1.value = row;
}

const form1 = ref({
    id: null,
    goodsTypeName: '',

})

const RoomCodeUpd = () => {
    axios.post('http://120.26.135.179:8033/api/GoodsProductUpdate', form1.value)
        .then((res) => {
            if (res.data.code == 0) {
                ElMessage.success(res.data.message)
                roomCodeUpdateDialog.value = false;
                RoomCodeGetlist();
            }
            else {
                ElMessage.error(res.data.message)
            }
        })
}


//删除房号
const RoomCodeDelete = (row: any) => {
    ElMessageBox.confirm('确认要删除吗?', '错误', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            axios.delete('http://120.26.135.179:8033/api/GoodsProductDelete?Id=' + row.id)
                .then((res) => {
                    if (res.data.code == 0) {
                        ElMessage.success(res.data.message)
                        RoomCodeGetlist();
                    }
                    else {
                        ElMessage.error(res.data.message)
                    }
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
</script>
